<script>

import gmDistrict from "@/view/components/gmDistrict.vue";

export default {
  components: {gmDistrict,},
  data() {
    return {
      tabPosition:'left',
      start:null,
      middle:[],
      end:null,
      lineName:'',
      stationTableData: [],
      lineTableData:[],
      tablePage:{
        total: 0,
        current: 1,
        size: 10
      },
    }
  },
  mounted() {
    this.getStationTable();
    this.getLineTable();
  },
  watch:{
    tabPosition(v){
      if(v=='right'){
         this.getLineTable()
      }
      else {
        this.getStationTable()
      }
    }
  },
  methods:{
    getStationTable(row){
      this.$HttpService.get(`/t-school/findStationToNumber`, {
        current: this.tablePage.current,
        districtCode:row,
        size: 10
      }).then(res => {
        this.stationTableData = res.records;
        this.tablePage.total = res.total;
        this.$forceUpdate()
      })
    },
    getLineTable(row){
      this.$HttpService.get(`/t-route/findPage`, {
        current: this.tablePage.current,
        districtCode:row,
        size: 10
      }).then(res => {
        this.lineTableData = res.records;
        this.tablePage.total = res.total;
        this.$forceUpdate()
      })
    },
    handleCommand(x){
      x.row['use'] = true;
      if (x.act === 'start') this.start = x.row;
      if (x.act === 'middle') {
        this.middle.push(x.row)
      }
      if (x.act === 'end') this.end = x.row;
      this.$forceUpdate()
    },
    clickTreeNode(row){
      if(this.tabPosition =='left'){
        this.getStationTable(row)
      }
      else {
        this.getLineTable(row)
      }
      // this.$set(this.tableForm, 'districtCode', code)
    },
    deleteMiddle(node){
      let index = this.middle.findIndex(x=>{
        return x.stationCode === node.stationCode
      })
      this.middle.splice(index, 1)
    },
    submitData(){
      if (!this.start) return this.$message.warning('请选择起点')
      if (!this.end) return this.$message.warning('请选择终点')
      if (this.lineName == '') return this.$message.warning('请填写路线名称')
      let middle = [];
      this.middle.forEach(x=>{
        middle.push(x.stationCode)
      })
      this.$HttpService.post(`t-route/add`, {
        routeName: this.lineName,
        stationCodeStart: this.start.schoolStationCode,
        stationCodeEnd: this.end.stationCode,
        passingPoindCode: middle.join(',')
      }).then(res => {
        this.$message.success('提交成功');
        this.reSet();
        this.getStationTable();
        this.getLineTable();
        this.$forceUpdate()
      })
    },
    reSet(){
      this.start = null;
      this.middle = [];
      this.end = null;
      this.lineName = '';
    },
    getStation(obj){
      let str = '-';
      obj.passingPoindCodeEns?.forEach(x=>{
        str += x.stationName+'-'
      })
      return str;
    },
    deleteLine(node){
      this.$confirm(`确认要删除这条数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$HttpService.del(`/t-route/delete-by-id/${node.routeCode}`).then(res => {
          this.$message.success('删除成功！')
          this.getStationTable();
          this.getLineTable();
          this.$forceUpdate()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除！'
        })
      })

    }
  }
}
</script>

<template>
  <div class="page-car">
    <div class="option-out">
      <div class="tab">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
          <el-radio-button label="left">未设置路线的学生出行需求</el-radio-button>
          <el-radio-button label="right">已有路线</el-radio-button>
        </el-radio-group>
      </div>
      <div class="plan" v-show="tabPosition === 'left'">
        <span class="iconfont SZ">&#xe892;</span>
        <div class="line-name">
          <div class="line-name-tit">请输入路线名称:</div>
          <el-input v-model="lineName" placeholder="请输入路线名称"></el-input>
        </div>
        <div class="line-plan">
          <div class="line1">
            <span class="iconfont">&#xe991;</span>
            <span class="text">{{start?.schoolStationName}}</span>
          </div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-cs-jt-xy-1-1"></use>
          </svg>
          <div class="line11" v-show="middle.length">
            <div class="line1" v-for="x in middle" :key="Math.random()">
              <span class="iconfont">&#xe652;</span>
              <span class="text">{{x?.stationName}}</span>
              <i class="el-icon-delete" @click="deleteMiddle(x)"></i>
            </div>
          </div>
          <svg class="icon" aria-hidden="true" v-show="middle.length">
            <use xlink:href="#icon-cs-jt-xy-1-1"></use>
          </svg>
          <div class="line1">
            <span class="iconfont">&#xe992;</span>
            <span class="text">{{end?.stationName}}</span>
          </div>
        </div>
        <div class="line-submit">
          <el-button type="primary" size="small" @click="submitData">提交</el-button>
          <el-button plain size="small" @click="reSet">重置</el-button>
        </div>
      </div>
    </div>
    <div class="main-com">
      <div class="dist-com">
        <gm-district @clickNode="clickTreeNode"></gm-district>
      </div>
      <div class="table-com">
        <el-table v-show="tabPosition === 'left'" :data="stationTableData" stripe style="width: 100%" type="flex" justify="center" align="middle">
          <el-table-column align="center" prop="schoolName" label="学校名称(起点)"></el-table-column>
          <el-table-column align="center" prop="address" label="学校所在"></el-table-column>
          <el-table-column align="center" prop="stationName" label="站点名称"></el-table-column>
          <el-table-column align="center" prop="stationDistrictName" label="站点区划"></el-table-column>
          <el-table-column align="center" prop="numberPeople" label="站点人数"></el-table-column>
          <el-table-column align="center" prop="numberPeople" label="操作">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  将该站点选择为<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :disabled="scope.row.use" :command="{row:scope.row,act:'start'}" icon="el-icon-location-information">起点</el-dropdown-item>
                  <el-dropdown-item :disabled="scope.row.use" :command="{row:scope.row,act:'middle'}" icon="el-icon-s-flag">途径点</el-dropdown-item>
                  <el-dropdown-item :disabled="scope.row.use" :command="{row:scope.row,act:'end'}" icon="el-icon-position">终点</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-show="tabPosition === 'right'" :data="lineTableData" stripe style="width: 100%" type="flex" justify="center" align="middle">
          <el-table-column align="center" prop="routeName" label="路线名称"></el-table-column>
          <el-table-column align="center" prop="createDate" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="stationCodeStartEn" label="起点站点">
            <template slot-scope="scope">
              {{scope.row.stationCodeStartEn?.stationName}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="passingPoindCodeEns" label="途径站点">
            <template slot-scope="scope">
              {{getStation(scope.row)}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stationCodeEndEn" label="终点站点">
            <template slot-scope="scope">
              {{scope.row.stationCodeEndEn?.stationName}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="numberPeople" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="deleteLine(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.option-out{
  ::v-deep .el-input__inner{
    border: 0!important;
    border-bottom: 1px solid #DCDFE6!important;
    background: #DCDFE6;
  }
  margin-bottom: 30px;


  .plan{
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    box-shadow: 3px 3px 3px 3px gainsboro;
    .SZ{
      position: absolute;
      left:-10px;
      top:-10px;
      font-size: 28px;
    }
  }

  .line-name{
    width: 400px;
    display: flex;
    align-items: center;
    .line-name-tit{
      width: 200px;
    }
  }
  .line-plan{
    width: 60%;
    display: flex;
    align-items: center;
    padding-left: 50px;
    .line11{
      width: 28%;
      .line1{
        width: 100%!important;
      }
    }
    .line1{
      height: 40px;
      width: 28%;
      margin-right: 20px;
      border-bottom: 1px solid #DCDFE6;
      .text{
        position: relative;
        top:10px;
        padding-left: 10px;
      }
      .el-icon-delete{
        float: right;
        position: relative;
        left: -18px;
        top:15px;
        color: red;
        cursor: pointer;
      }
    }
    .iconfont{
      font-size: 20px;
      position: relative;
      top:10px;
    }
    .icon{
      width: 50px;
      height: 40px;
      position: relative;
      top:10px;
      left: -5px;
    }
  }
  .line-submit{
    float: right;
  }
}
.main-com{
  display: flex;
  justify-content: space-between;
  .dist-com{
    padding: 10px;
    width: 300px;
    box-shadow: 3px 3px 3px 3px gainsboro;
    min-height: 500px;
    border-radius: 10px;
  }
  .table-com{
    padding: 10px;
    width: calc(100% - 380px);
    background: rgba(255,255,255,.5);
    min-height: 500px;
    box-shadow: 3px 3px 3px 3px gainsboro;
    border-radius: 10px;
    .el-dropdown-link{
      border-bottom: 1px solid #DCDFE6;
      cursor: pointer;
      color: #00a0e9;
    }
    .el-dropdown-link:hover{
      color: blue;
    }
  }
}
</style>
